<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>定时预约是（视频）</title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/cw.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
	<script src="../js/mui.min.js"></script>
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
    </script>
    <style type="text/css">
   		.bbs-ico{padding: 10px 15px;}
   		.bbs-ico{padding-bottom:0px;position:relative;}
   		.bbs-ico{padding-bottom:5px;}
		.bbs-ico>div:nth-child(1)>i{width: 60px;display:block;float:left}
		.bbs-ico>div:nth-child(1)>i>img{border-radius:50%;height:60px;width: 100%;}
		.bbs-ico>div:nth-child(1)>div{width:calc(100% - 60px);float:left;padding-left:10px;}
		.bbs-ico>div:nth-child(1)>div>li{margin-top: 7px;}
		.mui-grid-view.mui-grid-9{background:white;}
		.mui-btn-blue{border: 1px solid #8dc21f;background-color: #8dc21f;}
		.margin-r{margin-right:5px;}
		.mui-navigate-right:after, .mui-push-right:after{right:0px;}
    	/*弹窗*/
    	.zhifzzao{display:none;position:fixed;top:0;left: 0;right:0;bottom: 0;background:rgba(0,0,0,.5);z-index: 2;}
    	.zhiftc{display:none;font-size:15px;position:fixed;bottom: 10px;right: 0;left: 0;width:94%;left: 3%;z-index: 5;}
        .mui-table-view-cell{background:white;text-align: center;}
        .colorse{color:#8dc21f}
        .mui-table-view-cell:after{left: 0;}
    
    </style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i>
		<h1 class="mui-title ">定时预约</h1>
	</header> 
	<div id="content" class="mui-content"></div>
	<!--弹窗-->
	<div class="zhifzzao"></div>
	<div class="zhiftc">
		<div class="mui-table-view-cell" style="border-radius: 5px 5px 0 0;">
			选择支付方式
		</div>
		<div class="mui-table-view-cell cols colorse">
			微信支付
		</div>
		<div class="mui-table-view-cell cols colorse">
			支付宝支付
		</div>
		<div class="mui-table-view-cell cols colorse">
			银联支付
		</div>
		<div class="mui-table-view-cell cols colorse" style="border-radius: 0 0 5px 5px;">
			余额支付
		</div>
		<div class="mui-table-view-cell cols" style="margin-top: 5px;border-radius: 5px;color:#AAAAAA">
			取消
		</div>
	</div>
	<div class="table-view table-view-cell bbs-ico margin-bottom-5">
		<div class="overflow-h">
			<i><img src="../images/iconic.png" class="userPic"/></i>
			<div>
				<li>
					<span class="name"></span>&nbsp;
				</li>
				<li class="mui-h6 color-000">注：需先支付后预约</li>
			</div>
		</div>	
	</div>
	<div id="" class="mui-table-view-cell mui-table-view time-data" data-options='{"starttoday":1,"type":"datetime","beginDate":1,"endDate":"2025-11-31"}'>
		<span class="mui-navigate-right mui-pull-left">预约时间</span>
		<span class="mui-pull-right font-14 margin-r" id="result"></span>
	</div>
	<div id="picture-btn" class="mui-table-view-cell mui-table-view">
		<span class="mui-pull-left" >已支付</span>
		<span class="mui-pull-right font-14 color-red paymoney">0.0元</span>
	</div>
	<button class="mui-btn-block rz-btn">确定预约</button><!--onclick="openNewpage('find-doctor-time-video-1.html')"-->
</body>
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/global.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/mui.picker.min.js"></script>
<script type="text/javascript" src="../js/public.js" ></script>
<script type="text/javascript" src="../js/app/find-doctor-time-video.js" ></script>
<script>
	//弹窗
    $('.cols').on('tap',function(){
    	$('.zhifzzao').fadeOut(50);
    	$('.zhiftc').slideUp();
    });
	(function($) {
		$.init();
		var result = $('#result')[0];
		var btns = $('.time-data');
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				if(options.starttoday === 1){
					var endDateArray = options.endDate.split('-');
					end = new Date();
					options.beginDate = new Date(end.valueOf());//今天
					options.endDate = new Date(parseInt(endDateArray[0]),parseInt(endDateArray[1]),parseInt(endDateArray[2]));
				}
				var picker = new $.DtPicker(options);
				picker.show(function(rs) {
					result.innerHTML = rs.text;
					picker.dispose();
				});
			}, false);
		});
	})(mui);
	mui('body').on('shown', '.mui-popover', function(e) {
		//console.log('shown', e.detail.id);//detail为当前popover元素
	});
	mui('body').on('hidden', '.mui-popover', function(e) {
		//console.log('hidden', e.detail.id);//detail为当前popover元素
	});
</script>
</html>